<template>
  <div class="app-container">
    <!-- 轮播图区域 -->
    <div class="swiper-container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./assets/甜点.jpg" alt="甜点" class="slide-img">
          </div>
          <div class="swiper-slide">
            <img src="./assets/屋顶.jpg" alt="屋顶" class="slide-img">
          </div>
          <div class="swiper-slide">
            <img src="./assets/背影.jpg" alt="背影" class="slide-img">
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <!-- 学生查询列表 -->
    <div class="query-container">
      <div class="search-box">
        <input
            type="text"
            class="search-input"
            v-model="searchName"
            placeholder="输入姓名查询..."
            @input="handleSearch"
        >
      </div>

      <div v-if="isLoading" class="loading">加载中...</div>

      <table class="student-table" v-else>
        <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>班级</th>
          <th>学号</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="student in students" :key="student.studentId">
          <td>{{ student.studentName }}</td>
          <td>{{ student.studentGender === '1' ? '男' : '女' }}</td>
          <td>{{ student.studentClass }}</td>
          <td>{{ student.studentId }}</td>
        </tr>
        <tr v-if="students.length === 0 && !isLoading">
          <td colspan="4" class="no-data">未找到匹配的学生信息</td>
        </tr>
        </tbody>
      </table>

      <div class="pagination-container" v-if="total > 0 && !isLoading">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :total="total"
            :layout="['total', 'sizes', 'prev', 'pager', 'next', 'jumper']"
            @current-change="fetchStudents"
            @size-change="handlePageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Swiper from 'swiper/bundle';
import request from './utils/request';
import { ElPagination } from 'element-plus';

// 分页与数据状态
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const students = ref([]);
const searchName = ref('');
const isLoading = ref(false);

// 页面挂载时初始化
onMounted(() => {
  // 初始化轮播
  new Swiper('.swiper', {
    effect: 'coverflow',
    loop: true,
    coverflowEffect: { rotate: 20, depth: 200, scale: 0.8, stretch: -40, slideShadows: true },
    speed: 600,
    pagination: { el: '.swiper-pagination', clickable: true },
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
  });
  // 加载第一页数据
  fetchStudents();
});

// 分页查询核心方法
const fetchStudents = async () => {
  isLoading.value = true;
  try {
    let url = '/api/students';
    const params = { page: currentPage.value, size: pageSize.value };

    if (searchName.value.trim()) {
      url = '/api/students/search';
      params.name = searchName.value.trim();
    }

    const response = await request.get(url, { params });
    const resData = response.data;
    students.value = resData?.content || [];
    total.value = resData?.totalElements || 0;
  } catch (error) {
    console.error('数据查询失败：', error);
    students.value = [];
    total.value = 0;
  } finally {
    isLoading.value = false;
  }
};

// 搜索时重置到第一页
const handleSearch = () => {
  currentPage.value = 1;
  fetchStudents();
};

// 切换每页条数时重置到第一页
const handlePageSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  fetchStudents();
};
</script>

<style scoped>
.app-container { width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.swiper-container { width: 100%; height: 500px; margin-bottom: 50px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.slide-img { width: 100%; height: 100%; object-fit: cover; }
.query-container { padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.search-box { margin-bottom: 20px; }
.search-input { width: 300px; padding: 12px 15px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 16px; transition: border-color 0.3s; }
.search-input:focus { outline: none; border-color: #42b983; }

/* 表格样式（核心修改） */
.student-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; }
/* 表头样式（保持不变） */
.student-table thead tr { background-color: #fafafa; } /* 表头行背景色不变 */
.student-table th {
  padding: 14px 10px;
  border-bottom: 2px solid #e0e0e0; /* 表头底部加粗边框，区分表头与内容 */
  font-weight: 600;
  color: #333;
}
/* 数据行样式 */
.student-table tbody tr { transition: background-color 0.2s; }
/* 偶数行蓝色背景（只作用于tbody中的数据行，不影响表头） */
.student-table tbody tr:nth-child(even) { background-color: #e6f7ff; } /* 浅蓝色背景 */
/* 奇数行默认白色背景（可选，不设置则继承父元素） */
.student-table tbody tr:nth-child(odd) { background-color: #fff; }
/* 行hover效果（覆盖偶数行背景，提升交互体验） */
.student-table tbody tr:hover { background-color: #d1eaff; }
.student-table td { padding: 14px 10px; border-bottom: 1px solid #f0f0f0; }

.no-data { color: #999; height: 100px; line-height: 100px; }
.loading { text-align: center; padding: 50px 0; color: #666; font-size: 16px; }
.pagination-container { margin-top: 20px; text-align: right; padding: 10px 0; }
</style>